<body>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</body>

<script>
  const aBtn = document.querySelectorAll('button')
  /* for(var i = 0; i < aBtn.length; i ++) {
    aBtn[i].onclick = function() {
      alert(i)
    }
  } */
  // 当我点击按钮的时候，for 循环肯定走完了，走完了 i 变成几了？4，所以点击按钮输出的都是 4

  // 我期望是索引，怎么解决？

  /* for (var i = 0; i < aBtn.length; i++) {
    ;(function (i) {
      // 函数内部使用了外部函数的局部变量，这时候就会形成闭包
      // 闭包会使变量常驻内存，不会马上释放
      // 这时候的 i 就是每次循环时候记住的那个 i
      // 外部，i 是局部变量
      aBtn[i].onclick = function () {
        // 内部
        alert(i)
      }
    })(i);
  } */

  /* for (var i = 0; i < aBtn.length; i++) {
    aBtn[i].onclick = (function (i) {
      return function() {
        alert(i)
      }
    })(i)
  } */

  for(let i = 0; i < aBtn.length; i ++) {
    aBtn[i].onclick = function() {
      alert(i)
    }
  }
</script>